<template>
  <div class="search-div">
    <!-- 搜索表单 -->
    <el-form label-width="70px" size="small">
      <el-form-item label="姓名">
        <el-input
          v-model="doctor.dname"
          style="width: 100%"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-row style="display: flex">
        <el-button type="primary" size="small" @click="searchSysRole">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>

    <!--- 角色表格数据 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="sname" label="患者姓名" width="180" />
      <el-table-column prop="name" label="用户类型" width="180" />
      <el-table-column prop="endFollow" label="管理人数" width="180" />
      <el-table-column prop="winFollow" label="专案数" width="130" />
      <el-table-column prop="notFollow" label="高血压" width="180" />
    </el-table>

    <el-pagination
      v-model:current-page="pageParams.page"
      v-model:page-size="pageParams.limit"
      :page-sizes="[5, 10, 20, 50, 100]"
      @size-change="fetchData"
      @current-change="fetchData"
      layout="total, sizes, prev, pager, next"
      :total="total"
    />
    </div>
</template>
<!-- script部分修改内容 -->
<script setup>
import { ref, onMounted } from 'vue'
import { pageFollow } from '@/api/statistics/follow'

// 分页条总记录数
let total = ref(0)

// 定义表格数据模型
let list = ref([])
const defaultProps = {
  children: 'children',
  label: 'title',
}
//定义职称
let protitle = ref([])

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 5, // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象
//定义搜索职称数据模型
const protilte = {
  professionaltitle: '',
}
const protiltis = ref(protilte)
//定义职称数据模型
const defaultForm = {
  id: '',
  doctorId: '',
  dname: "",
  guanum: '',
  special: '',
  hypertension: '',
  diabetes: '',
  coronary: '',
  high: '',
  general: '',
}
const doctor = ref(defaultForm)

// 页面加载完毕以后请求后端接口获取数据
onMounted(() => {
  fetchData()
})

// 搜索按钮点击事件处理函数
const searchSysRole = () => {
  fetchData()
}

// 重置按钮点击事件处理函数
const resetData = () => {
  doctor.value.dname = ''
  fetchData()
}

// 远程调用后端分页查询接口
const fetchData = async () => {
  const { data, code, message } = await pageFollow(
    pageParams.value.page,
    pageParams.value.limit
  )
  list.value = data.list
  total.value = data.total
}

</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>